
import React from 'react'
import './style.scss'
import subClass from 'classnames'

const LoginInput = (props)=>{
    const {val,title,inputChange,className,type,isFocus,changeIsFocus,inputStyle,imgSrc} = props;
    let name = subClass('login-input',className,{
        'focus':isFocus
    });
    let input = {};
    switch(className){
      case 'user':
      case 'password':
      input =
        <div className={name}>
          <div className="input-title">
            <div className="word">{title}</div>
          </div>
          <input type={type} value={val} onChange={(e) => {
            inputChange(e.target.value)
          }} style={inputStyle}
                 onFocus={() => changeIsFocus(true)} onBlur={() => changeIsFocus(false)}/>
        </div>
      break;
      case 'verify':
        input =
          <div className={'login-input verify-wrapper'}>
            <div className={className}>
              <div className="input-title">
                <div className="word">{title}</div>
              </div>
              <input className={'verify-input'} type={type} value={val} onChange={(e) => {
                inputChange(e.target.value)
              }} style={inputStyle}
                     onFocus={() => changeIsFocus(true)} onBlur={() => changeIsFocus(false)}/>
            </div>
            <img className={'verify-icon'} src={imgSrc}/>
          </div>
        break;
    }
    return input;

}
LoginInput.defaultProps = {
    val:'',
    imgSrc:'',
    title:'',
    inputChange:()=>{},
    isFocus:false,
    changeIsFocus:()=>{}
}
module.exports = LoginInput
